<template>
  <div>
    <el-card style="height: inherit">
      <el-page-header @back="goBack" content="详情页面"/>
      <el-row :gutter="10" class="center-row">
        <h1>{{formData.activityName}}</h1><br>
      </el-row>
      <el-row :gutter="10" class="center-row">
        <h5>日期：{{formData.activityDate}}，</h5> <h5>参与人数：{{formData.participantCount}}</h5>
      </el-row>
      <el-row :gutter="50" class="center-row">
        {{formData.activityDescription}}<br>
        {{formData.notes}}<br>
        {{formData.leaderName}}
      </el-row>
      <el-row>
        <div>
          <div class="player-container">
            <vue-core-video-player  :src="formData.activityUrl"  autoplay />
          </div>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>

  export default {
    props: {
      formData: {
        type: Object,
        default: () => {
          return {}
        }
      },
    },
    data(){
      return {
        activityUrl:require(this.formData.activityUrl)
      }
    },
    created() {
      console.log("------------->")
    },
    mounted() {

    },
    methods: {
      goBack(){
        this.$emit('return-value');
      }
    }
  }
</script>

<style scoped>

  .center-row {
    display: flex;
    justify-content: center;
  }
</style>
